<template>
  <view v-if="shenheStatus == 0" class="areaInfo">
    <view class="areaInfoHd">
      <image :src="data.avatar" mode="aspectFill"></image>

      <view class="con">
        <view class="tel">{{ data.name }} {{ data.mobile }}</view>
        <view class="des">{{ getTypeText }}</view>
      </view>
    </view>

    <view class="info">
      <view class="bg"></view>

      <div class="infoContent">
        <view class="infoContentBox">
          <view class="item item1">
            <view class="title">
              可提现分红(元)
              <i
                class="iconfont icon-browse"
                v-if="show"
                @click="show = !show"
              ></i>
              <i
                class="iconfont icon-Notvisible"
                v-else
                @click="show = !show"
              ></i>
            </view>

            <view class="num"> {{ show ? data.cash_profit : "****" }} </view>
          </view>

          <view class="item">
            <view class="title">已提现分红(元)</view>
            <view class="num"> {{ data.cash_price }} </view>
          </view>

          <view class="item">
            <view class="title">累计分红(元)</view>
            <view class="num"> {{ data.total_price }} </view>
          </view>
        </view>
        <view class="infoContentFooter"> 分红比例{{ data.agent_rate }}% </view>
      </div>
    </view>

    <view class="menu">
      <view class="menuTit">常用工具</view>
      <view class="menuList">
        <view
          class="item"
          @click="$utils.toUrl('/shareholder/finance/commission?is_area=1')"
        >
          <image
            :src="asyncImgs.share_holder_area.area_profit"
            mode="aspectFill"
          ></image>
          <view class="tit">分红明细</view>
        </view>
        <view
          class="item"
          @click="$utils.toUrl('/shareholder/withdraw/index?is_area=1')"
        >
          <image
            :src="asyncImgs.share_holder_area.area_withdraw"
            mode="aspectFill"
          ></image>
          <view class="tit">账户提现</view>
        </view>
        <view
          class="item"
          @click="$utils.toUrl('/shareholder/finance/withdraw?is_area=1')"
        >
          <image
            :src="asyncImgs.share_holder_area.area_withdraw_details"
            mode="aspectFill"
          ></image>
          <view class="tit">提现明细</view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";

export default {
  components: { Shenhe },
  data() {
    return {
      data: {
        cash_profit: "0.00",
        total_price: "0.00",
        cash_price: 0,
        agent_rate: 0,
        agent_type: 1,
        avatar: "",
        name: "",
        mobile: "",
      },

      show: true,
    };
  },

  onShow() {
    this.getData();
  },

  computed: {
    getTypeText() {
      let str;

      switch (this.data.agent_type) {
        case 1:
          str = "省代理";
          break;

        case 2:
          str = "市代理";
          break;

        case 3:
          str = "区代理";
          break;
      }

      return str;
    },
  },

  methods: {
    async getData() {
      const res = await this.$allrequest.shareholder.getAreaAgentInfo({}, true);
      if (!res.code) {
        if (res.data.status != 1) {
          this.$utils.showModal(
            "提示",
            "当前不是区域代理，请先申请！",
            false,
            () => {
              this.$utils.toUrl("/area/apply/index", "redirectTo");
            }
          );
        }
        this.data = res.data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.areaInfo {
  min-height: 100vh;
  background: #f2f2f2;
}

.info {
  position: relative;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 230rpx;
  background: linear-gradient(180deg, #f0250e 0%, #f2f2f2 100%);
}

.areaInfoHd {
  display: flex;
  padding: 40rpx 24rpx;
  background: #f0250e;

  image {
    margin-right: 14rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 32px;
    background: #fff;
  }

  .con {
    flex: 1;
    overflow: hidden;
  }

  .tel {
    font-size: 32rpx;
    color: #fff;
    font-weight: bold;
  }

  .des {
    font-size: 24rpx;
    color: #fba794;
  }
}

.infoContent {
  position: relative;
  z-index: 2;
  margin: 0 24rpx;
  padding: 40rpx 40rpx 0;
  background: #fff;
  border-radius: 20rpx;
}

.infoContentBox {
  display: flex;
  flex-wrap: wrap;

  .item {
    margin-bottom: 30rpx;
    width: 50%;
  }

  .item1 {
    width: 100%;

    .num {
      font-size: 68rpx;
    }
  }

  .title {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #8c8c8c;
  }

  .num {
    font-size: 38rpx;
    font-weight: bold;
    color: #262626;
  }
}

.infoContentFooter {
  padding: 24rpx 0;
  font-size: 24rpx;
  color: #8c8c8c;
  border-top: 1px solid #f8f8f8;
}

.menu {
  padding: 0 24rpx;
}

.menuTit {
  padding: 28rpx 0 22rpx;
  font-size: 30rpx;
  font-weight: bold;
}

.menuList {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 25%;
    text-align: center;
  }

  image {
    display: block;
    margin: 18rpx auto;
    width: 80rpx;
    height: 80rpx;
  }

  .tit {
    font-size: 26rpx;
    color: #262626;
  }
}
</style>
